<template>
	<view class="container">
		<view class="list-box">
			<view v-for="(item,index) in dataList" :key="index" class="pay-item-box" :class="{'pay-item-box-a': curIndex == index}" @tap="selectPayItem(index)">
				<image v-show="curIndex == index" class="pay-item-bg" src="../../static/images/pay_select.png"></image>
				<view class="item-content">
					<view class="item-name-price">
						<view class="item-name">{{item.title}}</view>
						<view class="item-price-box">
							<view class="original-price">¥{{item.originalPrice}}</view>
							<view class="present-price" :class="{'present-price-a': curIndex == index}">¥{{item.presentPrice}}</view>
						</view>
					</view>
					<view class="validity-time">有效期（1年）</view>
					<view class="introduce" @tap="goIntroduce(item.id)">查看介绍></view>
				</view>
			</view>
		</view>
		<view class="submit-btn" @tap="goConfirmOrder">立即购买</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: -1,
				dataList: [
					{id: 1, title: '报考咨询师方案诊断', originalPrice: 599, presentPrice: 399},
					{id: 2, title: '招办专家一对一', originalPrice: 2499, presentPrice: 1999},
					{id: 3, title: '招办专家面对面', originalPrice: 5999, presentPrice: 4999}
				]
			}
		},
		
		methods: {
			
			goConfirmOrder() {
				uni.redirectTo({
					url: '/pages/confirm_order/confirm_order'
				})
			},
			
			selectPayItem(index) {
				this.curIndex = index
			},
			
			goIntroduce(id) {
				switch(id) {
					case 1:
						uni.navigateTo({
							url: '/pages/bao_kao_zhen_duan/bao_kao_zhen_duan'
						})
						break
					case 2:
						uni.navigateTo({
							url: '/pages/expert_one_to_one/expert_one_to_one'
						})
						break
					case 3:
						uni.navigateTo({
							url: '/pages/expert_face_to_face/expert_face_to_face'
						})
						break
					default:
						break
				}
			}
			
		}
	}
</script>

<style>
	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.list-box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
	}
	
	.pay-item-box {
		position: relative;
		width: 700rpx;
		height: 216rpx;
		border: 4rpx solid #cdcdcd;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}
	
	.pay-item-box-a {
		width: 706rpx !important;
		height: 224rpx !important;
		border: none !important;
	}
	
	.pay-item-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	.item-content {
		width: 660rpx;
		z-index: 1;
	}
	
	.item-name-price {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.item-name {
		color: #333333;
		font-size: 36rpx;
	}
	
	.item-price-box {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	
	.original-price {
		color: #c7c7c7;
		font-size: 30rpx;
		text-decoration: line-through;
		margin-right: 20rpx;
	}
	
	.present-price {	
		color: #794b3c;
		font-size: 48rpx;
	}
	
	.present-price-a {
		color: #e1805b !important;
	}
	
	.item-price-box {
		display: flex;
		flex-direction: row;
	}
	
	.validity-time {
		width: 100%;
		height: 40rpx;
		color: #333333;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	
	.introduce {
		width: 200rpx;
		height: 60rpx;
		color: #999999;
		font-size: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	
	.submit-btn {
		position: fixed;
		bottom: 30rpx;
		width: 700rpx;
		height: 78rpx;
		background: linear-gradient(90deg, #ff8806, #fbae2b);
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #ffffff;
	}
</style>
